<template>
  <div class="store-hub-container">
    <div class="background-animation">
      <canvas ref="canvas" class="canvas"></canvas>
    </div>
    <div class="content-wrapper">
      <div class="title">店铺状态总览中心</div>
      <div class="nav-cards-wrapper">
        <div class="nav-cards">
          <div class="nav-card" @click="navigateTo('/store-dashboard-hub/operational-data')" @mouseenter="animateCard" @mouseleave="resetCard">
            <div class="icon-container">
              <el-icon class="nav-icon"><TrendCharts /></el-icon>
            </div>
            <div class="card-title">运营数据</div>
          </div>
          <div class="nav-card" @click="navigateTo('/store-dashboard-hub/distribution-data')" @mouseenter="animateCard" @mouseleave="resetCard">
            <div class="icon-container">
              <el-icon class="nav-icon"><Place /></el-icon>
            </div>
            <div class="card-title">分布数据</div>
          </div>
          <div class="nav-card" @click="navigateTo('/store-dashboard-hub/store-data')" @mouseenter="animateCard" @mouseleave="resetCard">
            <div class="icon-container">
              <el-icon class="nav-icon"><Shop /></el-icon>
            </div>
            <div class="card-title">店铺数据</div>
          </div>
        </div>
      </div>
      <el-button type="primary" @click="goBackToMainDashboard" class="back-button">
        <el-icon><ArrowLeftBold /></el-icon>
        返回主系统
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { TrendCharts, Place, Shop, ArrowLeftBold } from '@element-plus/icons-vue';

const router = useRouter();
const canvas = ref(null);
let animationFrame = null;

const navigateTo = (path) => {
  router.push(path);
};

const goBackToMainDashboard = () => {
  router.push('/dashboard');
};

const animateCard = (event) => {
  const card = event.currentTarget;
  card.style.transform = 'translateY(-10px)';
  card.style.boxShadow = '0 15px 30px rgba(0, 150, 255, 0.35)';
  card.style.borderColor = 'rgba(0, 170, 255, 0.8)';
};

const resetCard = (event) => {
  const card = event.currentTarget;
  card.style.transform = 'translateY(0)';
  card.style.boxShadow = '0 10px 20px rgba(0, 70, 150, 0.25)';
  card.style.borderColor = 'rgba(70, 120, 230, 0.3)';
};

const initCanvas = () => {
  if (!canvas.value) return;
  const ctx = canvas.value.getContext('2d');
  const particles = [];
  const particleCount = 80; // Slightly fewer particles
  let width, height;

  const resizeCanvas = () => {
    if (!canvas.value) return;
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.value.width = width;
    canvas.value.height = height;
  };

  const createParticles = () => {
    for (let i = 0; i < particleCount; i++) {
      particles.push({
        x: Math.random() * width,
        y: Math.random() * height,
        vx: Math.random() * 0.4 - 0.2, // Slightly slower
        vy: Math.random() * 0.4 - 0.2,
        radius: Math.random() * 1.5 + 0.8, // Slightly smaller
        color: 'rgba(0, 180, 220, ' + (Math.random() * 0.4 + 0.2) + ')' // Different particle color (cyan/teal tones)
      });
    }
  };

  const drawParticles = () => {
    if (!canvas.value || !ctx) return;
    ctx.clearRect(0, 0, width, height);
    particles.forEach(particle => {
      particle.x += particle.vx;
      particle.y += particle.vy;
      if (particle.x < 0 || particle.x > width) particle.vx = -particle.vx;
      if (particle.y < 0 || particle.y > height) particle.vy = -particle.vy;
      ctx.beginPath();
      ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
      ctx.fillStyle = particle.color;
      ctx.fill();
    });
    ctx.beginPath();
    for (let i = 0; i < particles.length; i++) {
      for (let j = i + 1; j < particles.length; j++) {
        const dx = particles[i].x - particles[j].x;
        const dy = particles[i].y - particles[j].y;
        const distance = Math.sqrt(dx * dx + dy * dy);
        if (distance < 120) { // Shorter connection distance
          ctx.moveTo(particles[i].x, particles[i].y);
          ctx.lineTo(particles[j].x, particles[j].y);
        }
      }
    }
    ctx.strokeStyle = 'rgba(0, 180, 220, 0.08)'; // Lighter connection lines
    ctx.lineWidth = 0.4;
    ctx.stroke();
    animationFrame = requestAnimationFrame(drawParticles);
  };

  window.addEventListener('resize', resizeCanvas);
  resizeCanvas();
  createParticles();
  drawParticles();
};

onMounted(() => {
  initCanvas();
});

onUnmounted(() => {
  if (animationFrame) {
    cancelAnimationFrame(animationFrame);
  }
  window.removeEventListener('resize', resizeCanvas);
});

</script>

<style scoped>
.store-hub-container {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background-color: #0a0f14; /* Slightly different dark background */
  color: white;
}

.background-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.canvas {
  width: 100%;
  height: 100%;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  z-index: 1;
  position: relative;
  padding: 0 20px;
  box-sizing: border-box;
}

.title {
  font-size: 2.8rem; /* Slightly smaller title */
  font-weight: bold;
  margin-top: 10vh; /* Adjusted margin */
  text-align: center;
  background: linear-gradient(45deg, #00c6ff, #0072ff); /* Different gradient */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(0, 180, 255, 0.4);
  letter-spacing: 1.5px;
  flex-shrink: 0;
}

.nav-cards-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 100%;
  position: relative;
  top: -2rem; 
}

.nav-cards {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6rem; /* Adjusted gap */
  flex-wrap: nowrap;
  z-index: 1;
  margin-top: -6rem;
  
}

.nav-card {
  width: 200px; /* Slightly smaller cards */
  height: 200px;
  background-color: rgba(25, 35, 50, 0.75); /* Different card background */
  border: 1px solid rgba(0, 180, 220, 0.25);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 18px rgba(0, 80, 130, 0.2);
  padding: 1rem;
  box-sizing: border-box;
}

.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px; /* Smaller icon container */
  height: 70px;
  background: linear-gradient(135deg, #005f73, #0a9396); /* Different icon background */
  border-radius: 50%;
  margin-bottom: 1.2rem;
  box-shadow: 0 4px 12px rgba(0, 147, 147, 0.25);
}

.nav-icon {
  font-size: 2.2rem; /* Smaller icon */
  color: #e0fbfc;
}

.card-title {
  font-size: 1.1rem; /* Smaller card title */
  font-weight: 500;
  color: #e0fbfc;
  text-align: center;
}

.nav-card:active {
  transform: scale(0.95);
}

.back-button {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 180, 220, 0.2);
  border-color: rgba(0, 180, 220, 0.4);
  color: #e0fbfc;
}
.back-button:hover {
  background-color: rgba(0, 180, 220, 0.3);
  border-color: rgba(0, 180, 220, 0.6);
}
</style> 